<template>
    <div>
        <el-form-item label=''>
            <el-table :data="tableDataBatch.data" border style="width: 100%" footer-row-class-name="hide">
                <el-table-column prop="" label="菜单名称">
                    <template v-slot="{ row }">
                        <div class="flex items-center">
                            <el-input v-model.trim="row.menuName" placeholder="请输入菜单名称" clearable />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="noticeUser" label="菜单类型">
                    <template v-slot="{ row }">
                        <el-select v-model.trim="row.menuType" @change="(val) => { row.url = null }"
                            placeholder="请选择菜单类型">
                            <el-option v-for="item in CONFIGURATION_TYPE" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="noticeUser" label="链接地址">
                    <template v-slot="{ row }">
                        <config-select v-if="row.menuType == 4" v-model.trim='row.url' placeholder='请选择组态'
                            :style="{ width: '100%' }" />
                        <system-select v-if="row.menuType == 1" v-model.trim='row.url' placeholder='请选择系统'
                            :style="{ width: '100%' }" />
                        <el-input v-if="row.menuType == 2" v-model.trim="row.url" placeholder="请输入链接地址" clearable />
                        <el-select v-if="row.menuType == 3" v-model="row.url" placeholder="请选择菜单">
                            <el-option v-for="item in MENU_TYPE" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="60">
                    <template v-slot="scope">
                        <el-space>
                            <sj-link @click="deletes(scope)" custom-type="sred" :underline="false">删除</sj-link>
                        </el-space>
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer-wrapper w-full">
                <el-table :data="[100]" :show-header="false" :border="true" class="footer-table">
                    <el-table-column label="">
                        <template #default>
                            <div @click="addsetup" class="text-center cursor-pointer py-[0px] text-[#4583ff]">
                                添加
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-form-item>

    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { CONFIGURATION_TYPE, MENU_TYPE } from '@/constant/projectManagement'
import systemSelect from "@/components/select/systemSelect/systemOperateSelect.vue";
import configSelect from "@/components/select/configuration/ConfigurationSelect/ConfigurationSelect.vue";


const props = defineProps({
    list: {
        type: Array,
        default: []
    },
    dataList: {
        type: Array,
        default: []
    },
})
const emit = defineEmits(["update:dataList"]);




const tableDataBatch = ref({
    //表格数据
    data: [{

    }] //数据
});
watch(
    () => tableDataBatch.value.data,
    (newVal) => {
        emit("update:dataList", newVal);
        console.log("dataList", tableDataBatch.value.data);
    },
    {
        deep: true,
    }
);
onMounted(() => {
    setTimeout(() => {
        tableDataBatch.value.data = props.dataList
        console.log("tableDataBatch", tableDataBatch.value.data);
    }, 100)


});

const addsetup = () => {

    if (tableDataBatch.value.data) {
        tableDataBatch.value.data?.push({ menuName: "", menuType: "", url: "" });
    } else {
        tableDataBatch.value.data = [{ menuName: "", menuType: "", url: "" }]
    }

};


const deletes = row => {
    //   props.formInline.failNotice.splice(ite.$index, 1);
    tableDataBatch.value.data.splice(tableDataBatch.value.data.indexOf(row.row), 1)
};




</script>